<template>
    <div id="main">
        <div id="binhai">
            <p>温州理工滨海校区</p>
            <input type="text" name="findStu" id="findStu" v-model="studentId" placeholder="请输入学生学号:">
            <button @click="findStudent">搜索</button>
            <div v-if="student">
                <p>学生信息</p>
                <p>学号:{{ student.id }}</p>
                <p>姓名:{{ student.name }}</p>
                <p>年龄:{{ student.age }}</p>
                <p>专业:{{ student.major }}</p>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            studentId: "",
            student: null
        }
    },
    methods: {
        // 模拟数据
        findStudent() {
            if (this.studentId === '123456') {
                this.student = {
                    id: this.studentId,
                    name: '李小明',
                    age: 18,
                    major: '计算机科学'
                }
            }
        }
    }
}
</script>
<style scoped>
#main {
    width: 100%;
    display: flex;
    justify-content: center;
}

p{
    font-size: 18px;
    text-align: center;
}
</style>